// 定义全局仓库的文件

// 第一步: 引入创建仓库的方法
import axios from 'axios';
import { createStore } from 'vuex';

// 导入子模块 user模块, 和shop 模块
import user from './modules/user'
import shop from './modules/shop'

// 引入下载的持久化插件 vuex-persistedstate
import createpersistedstate from 'vuex-persistedstate'
// console.log('createPersistedState', createPersistedState);

// 第二步: 定义仓库store
const store = createStore({
    // state: { //  state 用来定义仓库数据的
    //     count: 100,  // 该数据就是全局响应式数据
    //     schoollist: [] // 学校列表
    // },
    state() {
        return {
            count: 100,  // 该数据就是全局响应式数据
            schoollist: [] // 学校列表
        }
    },
    mutations: { // 定义所有的操作state 数据的方法的(同步方法)
        addCount(state) {
            // console.log('state', state); state就是 {count:100}
            state.count++
        },
        addCountStep(state, step) {
            // step 就是参数
            state.count += step
        },
        initschoollist(state, payload) {
            state.schoollist = payload
        }

    },
    actions: { // 主要用来存放所以的异步方法的
        addCountAsync({ commit }) {
            // console.log('vuex中的异步');
            // console.log('context', context);// 上下文对象
            // actions中调用同步的muations 方法去修改state 数据. 不能直接修改
            setTimeout(() => {
                commit('addCount')
            }, 2000)
        },
        addCountStepAsync({ commit }, step) {
            setTimeout(() => {
                commit('addCountStep', step)
            }, 2000)
        },
        initSchoollistAsync({ commit }) {
            axios.get('https://api.i-lynn.cn/college').then(res => {
                // console.log(res);
                commit('initschoollist', res.data.data.list1)
            })
        }
    },
    getters: {  // 这个就是store 仓库中的计算属性
        // getters : 就是store仓库中的计算属性, 
        // 他会根据store 中的state 数据衍生出一个新的值, 不会修改原数据
        // getters 有缓存
        doubleCount(state) {

            // console.log('getters');
            return state.count * 2
        },
        // 学校列表计算属性
        filterSchoollist(state) {
            return state.schoollist.filter(item => item.school_name.includes('北京'))
        }
    },
    modules: {
        user: user,
        shop: shop
    },
    // 配置vuex持久化存储   
    plugins: [createpersistedstate({
        storage: sessionStorage  // 指定存储在会话存储中
    })],
})

export default store
